<template>
  <form class="row align-items-center">
    <div class="col-3">
      <!--  1.2 v-model绑定 , 设置修饰符 -->
      <input
        v-model.trim="subject"
        type="text"
        class="form-control"
        placeholder="请输入科目"
      />
    </div>

    <div class="col-3">
      <!--  1.2 v-model绑定 , 设置修饰符 -->
      <input
        v-model.number="score"
        type="text"
        class="form-control"
        placeholder="请输入分数"
      />
    </div>

    <div class="col-3">
      <!-- 1.3 点击事件触发， .prevent阻止  -->
      <button type="submit" class="btn btn-primary" @click.prevent="onSubmit">
        添加
      </button>
    </div>
  </form>
</template>

<script>
// 1. 收集用户输入内容
export default {
  data() {
    return {
      //    1.1 声明变量
      subject: "",
      score: 0,
    };
  },
  methods: {
    onSubmit() {
      // 2. 子传父, 发送收集的内容
      // 2.1 this.$emit('')
      this.$emit("submit", this.subject, this.score);
      // 2.4 清空旧数据
      this.subject = "";
      this.score = 0;
    },
  },
};
</script>

<style></style>
